import React, { Component, lazy } from 'react';
import './Index.scss'
import { AppOutline, AppstoreOutline, UnorderedListOutline, TruckOutline, UserOutline } from 'antd-mobile-icons'
import { Route, Redirect, Switch, NavLink } from 'react-router-dom';
//导入组件
// import Allgood from './Index/Allgood'
// import Cate from './Index/Cate'
// import Home from './Index/Home'
// import Mine from './Index/Mine'
// import Shopcart from './Index/ShopCart'
// import NotFound from './Index/NotFound';

//路由懒加载
let Home = lazy(() => import('./Index/Home'))
let Allgood = lazy(() => import('./Index/Allgood'))
let Cate = lazy(() => import('./Index/Cate'))
let Mine = lazy(() => import('./Index/Mine'))
let Shopcart = lazy(() => import('./Index/ShopCart'))
let NotFound = lazy(() => import('./NotFound'))

class Index extends Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path='/index/home' component={Home} />
                    <Route path='/index/allgood' component={Allgood} />
                    <Route path='/index/cate' component={Cate} />
                    <Route path='/index/shopcart' component={Shopcart} />
                    <Route path='/index/mine' component={Mine} />
                    <Redirect exact from='/index' to='/index/home' />
                    <Route path='*' component={NotFound} />
                </Switch>
                <div className="tabber">
                    <NavLink to='/index/home'>
                        <AppOutline fontSize={24} />
                        <div className="name">店铺</div>
                    </NavLink>
                    <NavLink to='/index/cate'>
                        <AppstoreOutline fontSize={24} />
                        <div className="name">分类</div>
                    </NavLink>
                    <NavLink to={{ pathname: '/index/allgood', state: { goodid: 281462 } }}>
                        <UnorderedListOutline fontSize={24} />
                        <div className="name">全部商品</div>
                    </NavLink>
                    <NavLink to='/index/shopcart'>
                        <TruckOutline fontSize={24} />
                        <div className="name">购物车</div>
                    </NavLink>
                    <NavLink to='/index/mine'>
                        <UserOutline fontSize={24} />
                        <div className="name">个人中心</div>
                    </NavLink>
                </div>

            </div>
        );
    }
}

export default Index;